<script setup lang="ts">
import {reactive, ref} from 'vue'
import {Plus} from '@element-plus/icons-vue'

const dataForm = reactive({
  value1: [],
  size: 10,
})

// 修正对象属性重复问题
const dataFormList = reactive({
  data: [
    {
      value1: [],
      tableData: [
        {
          name1: '1',
          name2: '08:00 —— 09:00',
          name6: '100',
          name7: '500',
        },
        {
          name1: '2',
          name2: '09:00 —— 10:00',
          name6: '150',
          name7: '550',
        },
      ],
      size: 10,
      dialogVisible: false,
      dialogImageUrl: '',
      imgShourangList: [], // 受让方截图
      imgList: [], // 转让方截图
      imgFukuanList: [], // 付款方截图
      transferDateStart: '2024-01-01T00:00:00.000Z',
      transferDateEnd: '2024-01-01T23:59:59.000Z',
      type: '1',
      tradingUnitDO: { name: '交易单元', tradingUnit: 'TU001' },
      expectedDate: '2024-01-02T00:00:00.000Z',
      money: ''
    }
  ]
})

// 选中的转让日期
const selectZhuanrangDate = ref('')
// 转让日期
const zhuanrangDate = ref([
  '2022-03-22',
  '2022-03-23',
  '2022-03-24',
])

// 重置筛选条件
const resetData = () => {
  dataForm.value1 = []
}

// TODO request form
const requestForm = reactive({
  startDate: dataFormList.data[0],
  endDate: dataFormList.data[0],
})

// 获取表格数据
const getDataList = () => {

}

// 图片上传成功
const handlerUploadSuccess = (e, index, type) => {
  if (type === 'zhuanrang') {
    dataFormList.data[index].imgList = e.fileList
  } else {
    dataFormList.data[index].imgFukuanList = e.fileList
  }
}

// 图片上传修改
const handlerUploadChange = (e, index, type) => {
  if (type === 'zhuanrang') {
    dataFormList.data[index].imgList = e.fileList
  } else {
    dataFormList.data[index].imgFukuanList = e.fileList
  }
}

// 图片上传之前钩子函数
const handlerUploadBefore = (e, index, type) => {
  if (type === 'zhuanrang') {
    dataFormList.data[index].imgList = e.fileList
  } else {
    dataFormList.data[index].imgFukuanList = e.fileList
  }
  return true
}

// 提交转让方截图
const submitZhuanrang = () => {
  // TODO request
  console.log(requestForm)
}

// 提交受让方截图
const submitShourang = () => {
  // TODO request
  console.log(requestForm)
}

// 提交付款截图
const submitFukuan = () => {
  // TODO request
  console.log(requestForm)
}

// 格式化日期
const formatDate = (dateStr) => {
  return dateStr ? dateStr.replace(/T/g, ' ').replace(/\.000Z/g, '') : ''
}

// 获取转让类型标签
const getTransferTypeLabel = (type) => {
  const types = [{ label: '转入', value: '1' }, { label: '转出', value: '2'}]
  return type ? types.find(child => child.value === type)?.label || '' : ''
}
</script>

<template>
  <el-row class="container">
    <el-col :span="3">转让日期：</el-col>
    <el-col :span="8">
      <el-select v-model="selectZhuanrangDate" placeholder="选择转让日期" clearable style="width: 240px">
        <el-option
          v-for="item in zhuanrangDate"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-col>
    <el-col :offset="7" :span="3">
      <el-button type="primary" @click="getDataList">跳转</el-button>
    </el-col>
    <el-col :span="3">
      <el-button type="primary" @click="resetData">重置</el-button>
    </el-col>
  </el-row>
  <el-col class="content">
    <el-row v-for="(item, index) in dataFormList.data" :key="index">
      <el-row class="info-row">
        <el-col :span="6">
          <h4>转让日期：{{ formatDate(item.transferDateStart) }}——{{ formatDate(item.transferDateEnd) }}</h4>
        </el-col>
        <el-col :span="6">
          <h4>转让类型：{{ getTransferTypeLabel(item.type) }}</h4>
        </el-col>
        <el-col :span="6">
          <h4>参与交易单元：{{ item.tradingUnitDO.name }}——{{ item.tradingUnitDO.tradingUnit }}</h4>
        </el-col>
        <el-col :span="6">
          <h4>预计操作日期：{{ formatDate(item.expectedDate) }}</h4>
        </el-col>
      </el-row>

      <el-row class="section-row">
        <el-col :span="14">
          <h4 style="color: black;">转让信息</h4>
          <el-table :data="item.tableData" style="width: 100%">
            <el-table-column prop="name1" label="序号" width="80" />
            <el-table-column prop="name2" label="时段" width="120" />
            <el-table-column prop="name6" label="电量MWh" width="100" />
            <el-table-column prop="name7" label="电价 元/MWh" width="120" />
          </el-table>
        </el-col>
        <el-col :span="9" :offset="1">
          <h4 style="color: black;">操作金额</h4>
          <div>实际操作金额: ¥<input v-model="item.money" placeholder="实际操作金额" style="width: 120px;" /></div>
        </el-col>
      </el-row>

      <el-row class="section-row">
        <el-col :span="24">
          <h4>操作详情</h4>
        </el-col>
      </el-row>

      <el-row class="section-row">
        <el-col :span="24">
          <h4>操作确认</h4>
          <h5>转让方截图：</h5>
          <el-row>
            <el-col :span="10" :offset="1">
              <el-upload
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :on-success="event => handlerUploadSuccess(event, index, 'zhuanrang')"
                :on-change="event => handlerUploadChange(event, index, 'zhuanrang')"
                :before-upload="event => handlerUploadBefore(event, index, 'zhuanrang')"
                v-model:file-list="item.imgList"
                list-type="picture-card"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
              <el-dialog v-model="item.dialogVisible">
                <img :style="{ width: '100%' }" :src="item.dialogImageUrl" alt="Preview Image" />
              </el-dialog>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row class="section-row">
        <el-col :span="24">
          <h4>受让方操作截图：</h4>
          <el-row>
            <img v-for="(child, childIndex) in item.imgShourangList" :key="childIndex" :src="child" style="max-width: 100px; margin-right: 10px;" />
          </el-row>
          <el-row>上传时间：2019-09-08 12:08</el-row>
        </el-col>
      </el-row>

      <el-row class="section-row">
        <el-col :span="24">
          <h4>付款确认</h4>
          <h5>付款截图：</h5>
          <el-row>
            <el-col :span="10" :offset="1">
              <el-upload
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :on-success="event => handlerUploadSuccess(event, index, 'fukuan')"
                :on-change="event => handlerUploadChange(event, index, 'fukuan')"
                :before-upload="event => handlerUploadBefore(event, index, 'fukuan')"
                v-model:file-list="item.imgFukuanList"
                list-type="picture-card"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
              <el-dialog v-model="item.dialogVisible">
                <img :style="{ width: '100%' }" :src="item.dialogImageUrl" alt="Preview Image" />
              </el-dialog>
            </el-col>
          </el-row>
           <!-- <el-row>
              <el-col :span="4" :offset="20">
                <el-button type="default" class="sub-btn" @click="submitData(item)">提交</el-button>
              </el-col>
            </el-row> -->
        </el-col>
      </el-row>
    </el-row>
  </el-col>
</template>

<style scoped lang="scss">
.container {
  padding: 10px;
}

.content {
  padding: 10px;
}

.info-row {
  margin-bottom: 10px;
}

.section-row {
  margin-bottom: 15px;
}

h4 {
  font-size: 16px;
  margin: 5px 0;
}

h5 {
  font-size: 14px;
  margin: 5px 0;
}

.el-table {
  font-size: 12px;
}

.el-input {
  font-size: 12px;
}
</style>